<template>
	<u-picker ref="$list" :title="props.title" :show="data.show" :keyName="props.keyName"
		:columns="props.options.length?[props.options]:[]" :closeOnClickOverlay="true" @close="data.show = false"
		@cancel="data.show = false" @confirm="on.confirm" confirmColor="#348B8A"></u-picker>
</template>

<script setup>
	import {
		nextTick
	} from 'vue'
	const props = defineProps({
		options: {
			type: Array,
			default: () => {
				return []
			}
		},
		modelValue: {
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		keyName: {
			type: String,
			default: 'label'
		}
	})

	const $list = Vue.ref(null)

	const emit = defineEmits(['update:modelValue', 'change'])

	const data = Vue.reactive({
		show: false,
	})

	const on = {
		confirm(e) {
			emit('update:modelValue', e.value[0].value)
			emit('change', e.value[0])
			data.show = false
		}
	}

	defineExpose({
		show() {
			let index = props.options.findIndex(item => item[props.keyName] == props.modelValue)
			data.defaultInde = [index == -1 ? 0 : index]
			$list.value.setIndexs(data.defaultInde)
			data.show = true
		}
	})
</script>